require(['./config'], () => {
  require(['template', 'header', 'jquery'], (template,header) => {
    class Cart {
      constructor () {
        this.render() //渲染数据
        this.calcTotalMoney() //算总价
        this.checksChange() //监听单个商品的选择事件
        this.setAllCheckStatus() //如全部商品check为true则全选框checked
        this.AllCheckTrue() //全选框的点击事件
        this.singleDel() //单个商品的删除点击事件
        this.countNum() //商品数量编辑
        this.batchDel() //商品批量删除
        this.goToBuy() //点击结算事件
      }
      render () {
        const cart = localStorage.getItem('cart')
        if (cart) {
          this.cart = JSON.parse(cart)
          $('#listBody').html(template('listBodyTemplate', { cart: this.cart }))
          $('#cart-empty').hide()
        } else {
          // 购物车为空
          $('#fixed').hide()
          $('#listBody').hide()
          $('#listHeader').hide()
          $('#cart-empty').show()
          $('.allGoods-con').hide()
        }
        header.calcCartCount()
      }
      checksChange () {
        const _this = this
        $('.select').on('change', function () {
          // 把当前数据的check属性修改为这个checkbox的checked状态
          const id = Number($(this).parents('.goods').attr('data-id'))
          _this.cart = _this.cart.map(shop => {
            if (shop.id === id) shop.check = $(this).prop('checked')
            return shop
          })
          // 页面显示、this.cart以及localStorage三者要统一
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          // 重新计算总价
          _this.calcTotalMoney()
          // 重新设置全选状态
          _this.setAllCheckStatus()
        })
      }
      AllCheckTrue(){
        // 全选框的点击事件
        const _this = this
        $('.all-check').on('change', function() {
          _this.cart = _this.cart.map(shop => {
            shop.check = $(this).prop('checked')
            return shop
          })
          // 页面显示、this.cart以及localStorage三者要统一
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          // 重新计算总价
          _this.calcTotalMoney()
          // 重新设置全选状态
          _this.setAllCheckStatus()
          $('.select').each(function(){
            $(this).prop("checked",$('#all-check').prop('checked'))
          })
          // 根据check属性给goods添加class名active
          $('.select').each(function(){
            if($(this).prop('checked')){
              $(this).parents('.goods').addClass('active')
            }else{
              $(this).parents('.goods').removeClass('active')
            }
          })
        })
      }
      setAllCheckStatus () {
        // 判断cart是否全部check为true
        const isAllCheck = this.cart.every(shop => shop.check)
        $('#all-check').prop('checked', isAllCheck)
        $('#all-check2').prop('checked', isAllCheck)
        // 如果没有数据则取消选中则disabled
        if(this.cart.length == 0){
          $('#all-check').prop('checked',false).prop('disabled',true)
          $('#all-check2').prop('checked',false).prop('disabled',true)
        }
        // 根据check属性给goods添加class名active
        $('.select').each(function(){
          if($(this).prop('checked')){
            $(this).parents('.goods').addClass('active')
          }else{
            $(this).parents('.goods').removeClass('active')
          }
        })
      }
      calcTotalMoney () {
        // 用数据来算，this.cart
        const money = this.cart.reduce((total, shop) => {
          if (shop.check) total += shop.count * shop.price
          return total
        }, 0)
        const count = this.cart.reduce((total, shop) => {
          if(shop.check) total += Number(shop.count)
          return total
        },0)
        $('#Paymoney').html(money.toFixed(2))
        $('#payCount').html(count)
        $('#shopNum').html(count)
      }
      singleDel(){
        // 单个商品的删除点击事件
        const _this = this
        $('.singleDel').on('click', function () {
          // 把当前数据从cart中删掉
          const id = Number($(this).parents('.goods').attr('data-id'))
          _this.cart = _this.cart.filter(shop => shop.id != id)
          $(this).parents('.goods').remove()
          // 如果全部商品都被删除完了则移除cart
          if($('#listBody').children().is('.goods')){
            // 页面显示、this.cart以及localStorage三者要统一
            localStorage.setItem('cart', JSON.stringify(_this.cart))
          }else{
            localStorage.removeItem('cart')
            // 重新渲染页面
            _this.render()
          }
          // 重新计算总价
          _this.calcTotalMoney()
          // 重新设置全选状态
          _this.setAllCheckStatus()
        })
      }
      countNum(){
        // 商品数量编辑
        const _this = this
        $('.countInput').on('keyup',function(){
          const id = Number($(this).parents('.goods').attr('data-id'))
          var num = 1
          _this.cart.some(function(shop) {
            if (shop.id === id){
              num = Number(shop.count)
            }
          })
          const val = $(this).val()
          // 通过正则表达式判断输入的值是否为正整数，不是则将value改为cart中储存的count值
          if((/^[1-9]\d*$/.test( val ))){
            if(val == 1){
              $(this).parents('.num').children('.subBtn').prop('disabled',true)
            }else{
              $(this).parents('.num').children('.subBtn').prop('disabled',false)
            }   
            _this.cart = _this.cart.map(shop => {
              if (shop.id === id){
                shop.count = val
                $(this).parents('.num').next('h5').children('.singleTotalPrice').html((shop.count * shop.price).toFixed(2))
              }
              return shop
            })
            // 页面显示、this.cart以及localStorage三者要统一
            localStorage.setItem('cart', JSON.stringify(_this.cart))
            // 重新计算总价
            _this.calcTotalMoney()
          }else{  
            $(this).val(`${num}`)
          }
        })
        // 点击增加按钮的事件
        $(".addBtn").on('click', function(){
          const id = Number($(this).parents('.goods').attr('data-id'))
          _this.cart = _this.cart.map(shop => {
            if (shop.id === id){
              shop.count++
              $(this).parents('.num').children('input').val(shop.count)
              $(this).parents('.num').next('h5').children('.singleTotalPrice').html((shop.count * shop.price).toFixed(2))
            }
            return shop
          })
          // 移除subBtn的disabled属性
          $(this).parents('.num').children('.subBtn').prop('disabled',false)
          // 页面显示、this.cart以及localStorage三者要统一
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          // 重新计算总价
          _this.calcTotalMoney()
        })
        // 点击减少按钮的事件
        $(".subBtn").on('click', function(){
          const id = Number($(this).parents('.goods').attr('data-id'))
          _this.cart = _this.cart.map(shop => {
            if (shop.id === id){
              shop.count--
              $(this).parents('.num').children('input').val(shop.count)
              $(this).parents('.num').next('h5').children('.singleTotalPrice').html((shop.count * shop.price).toFixed(2))
              if(shop.count == 1) $(this).prop('disabled',true)
            }
            return shop
          })
          // 页面显示、this.cart以及localStorage三者要统一
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          // 重新计算总价
          _this.calcTotalMoney()
        })
      }
      batchDel(){
        // 批量删除
        const _this = this
        var newCart = []
        var jishu = 0
        $('#batchDel').on('click', function () {
          // 把选择的数据从cart中删掉
          _this.cart.map(shop => {
            if(shop.check == false){
              newCart = newCart.concat(shop)
              jishu ++
            }
            return shop
          })
          console.log(jishu)
          // 页面显示、this.cart以及localStorage三者要统一
          localStorage.setItem('cart', JSON.stringify(newCart))
          if(jishu == 0){
            localStorage.removeItem('cart')
          }
          // 重新计算总价
          _this.calcTotalMoney()
          // 重新设置全选状态
          _this.setAllCheckStatus()
          // 重新渲染页面
          _this.render()
        })
      }
      goToBuy(){
        $('#alipay').hide()
        $('#goBuy').on('click',function(){
          $('#alipay').fadeIn(2000)
        })
        $('#alipay').on('click',function(){
          $(this).fadeOut(2000)
        })
      }
    }
    new Cart()
  })
})